<template>
  <div>
    <div class="outfit-container">
      <el-card class="treeList">
        <div>
          <el-tree
            ref="tree"
            :data="outfitTree"
            :props="defaultProps"
            icon-class="el-icon-circle-plus"
            :expand-on-click-node="false"
            highlight-current
            node-key="id"
            :current-node-key="currentNodeKey"
            :default-expanded-keys="['1024984540818568481']"
            @node-click="changeTree"
          />
        </div>
      </el-card>
      <div style="width: 1010px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>机构信息</span>
          </div>
          <el-form
            ref="form"
            :model="form"
            label-width="100px"
            class="demo-ruleForm"
            :disabled="false"
          >
            <el-row type="flex" justify="space-between">
              <el-form-item label="机构编号" prop="id">
                <el-input v-model="form.id" disabled />
              </el-form-item>
              <el-form-item label="机构名称" prop="name">
                <el-input v-model="form.name" disabled />
              </el-form-item>
              <el-form-item label="机构类型">
                <el-select
                  v-model="form.type"
                  placeholder="请选择机构名称"
                  disabled
                >
                  <el-option label="一级转运" :value="1" />
                  <el-option label="二级转运" :value="2" />
                  <el-option label="网点" :value="3" />
                </el-select>
              </el-form-item>
            </el-row>
            <el-form-item label="机构地址">
              <el-row type="flex" justify="space-between">
                <el-select
                  v-model="form.provinceId"
                  :disabled="disabled"
                  placeholder="请选择省份"
                  style="width: 33%"
                  clearable
                  @change="onProvinceSelect"
                >
                  <el-option
                    v-for="item in provinceList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
                <el-select
                  v-model="form.cityId"
                  placeholder="请选择城市"
                  style="width: 33%"
                  clearable
                  :disabled="!form.provinceId || disabled"
                  @change="onCitySelect"
                >
                  <el-option
                    v-for="item in cityList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
                <el-select
                  v-model="form.countyId"
                  :disabled="!form.cityId || disabled"
                  placeholder="请选择地区"
                  style="width: 33%"
                  clearable
                  @change="onCountySelect"
                >
                  <el-option
                    v-for="item in countyList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-row>
            </el-form-item>

            <el-row type="flex" justify="space-between">
              <el-form-item label="详细地址" prop="address">
                <el-input v-model="form.address" :disabled="disabled" />
              </el-form-item>
              <el-form-item label="经度" prop="longitude">
                <el-input
                  v-model="form.longitude"
                  :disabled="true"
                ><template slot="append">E</template></el-input>
              </el-form-item>
              <el-form-item label="纬度" prop="latitude">
                <el-input
                  v-model="form.latitude"
                  disabled
                ><template slot="append">N</template></el-input>
              </el-form-item>
            </el-row>
            <el-row type="flex">
              <el-form-item label="机构负责人" prop="managerName">
                <el-input v-model="form.managerName" :disabled="disabled" />
              </el-form-item>
              <el-form-item label="机构电话" prop="phone">
                <el-input v-model="form.phone" :disabled="disabled" />
              </el-form-item>
            </el-row>
          </el-form>
          <el-row type="flex" justify="center">

            <el-button
              v-if="disabled"
              style="background-color: #e15536; color: #fff; padding: 12px 32px"
              @click="outfitEdit"
            >编辑</el-button>
            <el-button
              v-else
              style="background-color: #e15536; color: #fff; padding: 12px 32px"
              @click="outfitPre"
            >保存</el-button>

          </el-row>
        </el-card>
        <el-card class="box-card" style="margin-top: 20px">
          <div slot="header" class="clearfix">
            <span>员工信息</span>
          </div>
          <el-table :data="staffInfo" stripe style="width: 100%">
            <el-table-column type="index" label="序号" width="60" />
            <el-table-column prop="userId" label="员工编号" width="170" />
            <el-table-column prop="name" label="员工姓名" width="121" />
            <el-table-column prop="mobile" label="手机号" width="121" />
            <el-table-column prop="agency.name" label="所属机构" width="170" />
            <el-table-column prop="account" label="系统账户" width="121" />
            <el-table-column prop="stationName" label="系统角色" width="121" />
            <el-table-column prop="status" label="账号状态">
              <template v-slot="{ row }">
                <span> {{ row.status === 1 ? "正常" : "禁用" }}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            v-if="pageParams.pageSize >= 5 && total >= 5"
            style="text-align: center; margin-top: 20px"
            :page-sizes="[5, 10, 20, 40]"
            :page-size="pageParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :current-page="pageParams.page"
            @current-change="changePage"
          />
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { outfitTree, staffInfo, outfitInfo, outfitPlace } from '@/api/basic'
export default {
  name: 'Institution',
  data() {
    return {
      // 员工信息
      staffInfo: [],
      filterText: '',

      // 获取父id地址
      provinceList: [],
      cityList: [],
      countyList: [],

      // 树状图数据
      outfitTree: [],
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      currentNodeKey: '1024985257948084801',

      // 员工信息-分页
      pageParams: {
        page: 1,
        pageSize: 5,
        agencyId: '1024985257948084801'
      },
      total: '',

      // 默认机构id
      outfitId: '' || '1024985257948084801',

      // 点击编辑，机构详细信息
      disabled: true,
      form: {
        address: '',
        cityId: '',
        countyId: '',
        extra: '',
        id: '',
        latitude: '',
        longitude: '',
        managerName: '',
        name: '',
        parent: {
          id: '',
          name: '',
          subAgencies: '',
          type: ''
        },
        parentId: '',
        phone: '',
        provinceId: '',
        status: '',
        type: ''
      }
    }
  },
  created() {
    this.outfitTreeList() // 树状图渲染
    this.staffInfoList() // 员工信息渲染
    this.outfitInfoList() // 机构详细信息渲染
    this.getoutfitData()// 位置
  },
  methods: {
    // 树状图渲染
    async outfitTreeList() {
      const res = await outfitTree()
      const treeDate = JSON.parse(res.data.data)
      // 1024706903290237921
      treeDate[6].parentId = '1024706903290237921'

      const arr = treeDate[6]
      treeDate.splice(6, 1)
      treeDate[5].children[0].children.push(arr)
      this.outfitTree = treeDate
    },
    // 点击树状图获得id
    changeTree(i) {
      // 将分页调整为1
      console.log(i)
      this.pageParams.page = 1
      const id = i.id
      // 将获得的id代入
      this.outfitId = id
      this.pageParams.agencyId = id // 员工
      // 重新渲染
      this.outfitInfoList() // 机构
      this.staffInfoList() // 员工
      this.getoutfitData()// 地址
    },
    // 员工信息
    async staffInfoList() {
      const res = await staffInfo(this.pageParams)
      // console.log(res.data.data);
      this.staffInfo = res.data.data.items
      this.total = Number(res.data.data.counts)
    },
    // 员工点击分页切换
    changePage(page) {
      this.pageParams.page = page
      this.staffInfoList()
    },

    // 机构详细信息回填
    async outfitInfoList() {
      const res = await outfitInfo(this.outfitId)
      this.form = res.data.data
      console.log(res.data.data)

      this.form.provinceId = res.data.data.province.id
      this.form.cityId = res.data.data.city.id
      this.form.countyId = res.data.data.county.id
    },

    // 获取位置

    async getoutfitData() {
      const provinceData = await outfitPlace()
      this.provinceList = provinceData.data.data

      setTimeout(async() => {
        const cityData = await outfitPlace(this.form.provinceId)
        this.cityList = cityData.data.data
      }, 100)

      setTimeout(async() => {
        const countyData = await outfitPlace(this.form.cityId)
        this.countyList = countyData.data.data
      }, 500)
    },

    // 点击省份获取城市列表
    onProvinceSelect(provinceId) {
      this.getoutfitData(provinceId)
      this.$set(this.form, 'cityId', '')
      this.$set(this.form, 'countyId', '')
      this.$forceUpdate()
    },
    // 点击城市获取地区列表
    onCitySelect(CityId) {
      this.getoutfitData(CityId)
      this.$set(this.form, 'countyId', '')
      this.$forceUpdate()
    },
    // 点击地区重新渲染地区
    onCountySelect() {
      this.getoutfitData()
    },
    // 点击编辑
    outfitEdit() {
      this.disabled = false
    },
    // 点击保存
    async outfitPre() {
      // const res = await outfitPreList(this.form)
      if (this.form.provinceId === '' || this.form.cityId === '' || this.form.countyId === '') {
        this.$message.error('请选择机构地址')
        return
      }
      if (this.form.address === '') {
        this.$message.error('请输入详细地址')
        return
      }
      this.disabled = true
    }
  }
}
</script>

<style lang="scss" scoped>
.outfit-container {
  width: 1300px;
  height: 100%;
  padding: 23px 20px 20px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
}

.treeList {
  width: 250px;
  padding-left: 10px;
  margin-right: 20px;
}
</style>
